<!--
 * Date：2017.05.14 星期日 晚上
 * Function：留言CRUD列表页面
 * E-mail：woaitianwen@qq.com
 * Author：zhouyulong
 */
 -->

<%- include header %>
<%- include nav %>
<style>
body {
    background: #eee;
}
.div1 {
    max-width: 330px;
    padding: 15px;
    text-align: center;
    margin: 0 auto;
 }    
 .div1 h3 {
     text-align: center
 }

td{
font-size: 1.4rem;
color: #6f6f6f;
text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden; 
} 

table{ 

table-layout:fixed;
} 

</style>
<div class="container">
	<div class="row">
		
        <div class="col-md-12">
        <h4>留言列表</h4>
        <div class="con"></div>
        <div class="table-responsive">

                
              <table id="mytable" class="table table-condensed table-bordered table-hover table-striped">
                   
                   <thead>
                   
                   <th width="5%"><input type="checkbox" id="checkall" /></th>
                   <th width="10%">姓名</th>
                   <th width="15%">微信号</th>
                   <th width="20%">Email</th>
                   <th width="30%">留言</th>
                   <th width="10%">发布时间</th>
                   <th width="5%">修改</th>
                   <th width="5%">删除</th>
                   </thead>
    <tbody id="mytbody">
    
    <!--<tr>
    <td><input type="checkbox" class="checkthis" /></td>
    <td>Mohsin</td>
    <td>Irshad</td>
    <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td>
    <td>isometric.mohsin@gmail.com</td>
    <td>+923335586757</td>
    <td>+923335586757</td>
    <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
    <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
    </tr>-->
    
 <!--<tr>
    <td><input type="checkbox" class="checkthis" /></td>
    <td>Mohsin</td>
    <td>Irshad</td>
    <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td>
    <td>isometric.mohsin@gmail.com</td>
    <td>+923335586757</td>
    <td>+923335586757</td>
    <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
    <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
    </tr>
    
    
 <tr>
    <td><input type="checkbox" class="checkthis" /></td>
    <td>Mohsin</td>
    <td>Irshad</td>
    <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td>
    <td>isometric.mohsin@gmail.com</td>
    <td>+923335586757</td>
    <td>+923335586757</td>
    <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
    <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
    </tr>
    
    
    
 <tr>
    <td><input type="checkbox" class="checkthis" /></td>
    <td>Mohsin</td>
    <td>Irshad</td>
    <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td>
    <td>isometric.mohsin@gmail.com</td>
    <td>+923335586757</td>
    <td>+923335586757</td>
    <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
    <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
    </tr>
    
    
 <tr>
    <td><input type="checkbox" class="checkthis" /></td>
    <td>Mohsin</td>
    <td>Irshad</td>
    <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td>
    <td>isometric.mohsin@gmail.com</td>
    <td>+923335586757</td>
    <td>+923335586757</td>
    <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
    <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
    </tr>-->
    
   
    
   
    
    </tbody>
        
</table>

<div class="clearfix"></div>
<ul class="pagination pull-right">
  <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
</ul>
                
            </div>
            
        </div>
	</div>
</div>

<!-- 弹出模态框（修改）-->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
      <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="Heading">修改留言内容</h4>
      </div>
          <div class="modal-body">
          <div class="form-group">
        <input class="form-control " type="text" placeholder="Mohsin">
        </div>
        <div class="form-group">
        
        <input class="form-control " type="text" placeholder="Irshad">
        </div>
        <div class="form-group">
        <textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
    
        
        </div>
      </div>
          <div class="modal-footer ">
        <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
      </div>
        </div>
    <!-- /.modal-content --> 
  </div>
      <!-- /.modal-dialog --> 
    </div>
    
    
    <!-- 弹出模态框（删除）-->
    <!--<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
      <div class="modal-dialog">
    <div class="modal-content">
          <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="Heading">删除留言</h4>
      </div>
          <div class="modal-body">
       
       <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> 你确定要删除吗？</div>
       
      </div>
        <div class="modal-footer ">
        <button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
      </div>
        </div>
   
  </div>-->
      
    </div>
<script>
$(document).ready(function(){
   $("#mytable #checkall").click(function () {
        if ($("#mytable #checkall").is(':checked')) {
            $("#mytable input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });

        } else {
            $("#mytable input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });
    
    $("[data-toggle=tooltip]").tooltip();
});
</script>
<script>
//请求token认证
var token = window.localStorage.getItem('token');
//返回json数据之后拼装html
function str(data) {
     var len = data.length;
                        var str = '';
                        for (var i = 0; i < len; i++) {
                            str += '<tr>'+
                                   '<td><input type="checkbox" class="checkthis" /></td>'+
                                   '<td>'+data[i].username+'</td>'+
                                   '<td>'+data[i].weixin+'</td>'+
                                   '<td>'+data[i].email+'</td>'+
                                   '<td>'+data[i].comments+'</td>'+
                                   '<td>'+data[i].Created_date+'</td>'+
                                   '<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs edit-item" data-title="Edit" data-toggle="modal" data-target="#edit"><span class="glyphicon glyphicon-pencil" ></span></button></p></td>'+
                                   '<td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs remove-item" data-title="Delete" data-toggle="modal" data-target="#delete" data-id="' + data[i]._id + '" onclick="DeleteModal();"><span class="glyphicon glyphicon-trash"></span></button></p></td>'+
                                   '<tr>';
                        }
                        $('#mytbody').append(str);
                           
}
//验证用户是否过期
function validation(data) {
    if (data.status == 2) {
        //token已过期时要跳转到登录首页
        location.href = '/login';
        window.setTimeout(function(){
                    alert(data.message);
             },1000);
    } else if (data.status == 1) {
        //没有提交token时要跳转到登录首页
        location.href = '/login';
         window.setTimeout(function(){
                    alert(data.message);
             },1000);
    } else {

    }
}
//读取操作
function read() {

                //获取全部留言内容
                $.ajax({
                    url: "http://localhost:3000/api/comment",
                    type: "get",
                    dataType: 'json',
                    headers: {'x-access-token': token},
                    success: function(data) {
                        
                        str(data);
                        validation(data);

                    }
                       
                });

}
read();
//删除操作
function Delete() {
  
//删除一篇留言内容
$('body').on('click' , '.remove-item' , function(e){
    //阻止冒泡事件
    e.preventDefault();
    
    var id = $('.remove-item').attr("data-id");
    console.log(id);
    var confirmation = confirm('你确定要删除吗？');
    if (confirmation === true) {
        $.ajax({
        dataType: 'json',
        type:'delete',
        url: 'http://localhost:3000/api/comment/'+ id,
        data:{id:id},
        success: function(data) {
            console.log('删除成功！');
        }
    })
    }
});
}
Delete();



    
</script>
<%- include footer %>